
// 各个浏览器的属性前缀，true表示开启，false表示不开启
//-----------------------------------------------------
$prefixForWebkit:             true !default;
$prefixForMozilla:            true !default;
$prefixForMicrosoft:          true !default;
$prefixForOpera:              false !default; //opera从版本15开始转向webkit，所以默认为false，不输出o前缀
$prefixNo:                    true !default;

// prefixer
// 用于在属性上加前缀
// 默认这里将只输出webkit前缀和标准（如果要开启opera的可以将$prefixForOpera设置为true）
//-----------------------------------------------------
@mixin prefixer($property, $value, $prefixes: o webkit) {
  @each $prefix in $prefixes {
    @if $prefix == webkit and $prefixForWebkit == true {
      -webkit-#{$property}: $value;
    }
    @else if $prefix == moz and $prefixForMozilla == true {
      -moz-#{$property}: $value;
    }
    @else if $prefix == ms and $prefixForMicrosoft == true {
      -ms-#{$property}: $value;
    }
    @else if $prefix == o and $prefixForOpera == true {
      -o-#{$property}: $value;
    }
  }
  @if $prefixNo {
    #{$property}: $value;
  }
}

// disable prefix
// 设置所有前缀和标准为false，用于@keyframes
@mixin disable-prefix-for-all() {
  $prefixForWebkit:      false;
  $prefixForMozilla:     false;
  $prefixForMicrosoft:   false;
  $prefixForOpera:       false;
  $prefixNo:             false;
}

// 在各自的@if判断里面，先禁用所有的前缀，然后开启对应的前缀
// 最后输出标准的时候，直接禁用所有的前缀，开启标准
// example:
// @include keyframes(pulse, webkit moz){
//     0% {
//         opacity: 1;
//         @include transform(scale(1));
//     }
//     50% {
//         opacity: 0.7;
//         @include transform(scale(0.9));
//     }
//     100% {
//         opacity: 1;
//         @include transform(scale(1));
//     }
// };
@mixin keyframes($name, $prefixes: webkit o ) {
  $originalPrefixForWebkit: $prefixForWebkit;
  $originalPrefixForMozilla: $prefixForMozilla;
  $originalPrefixForMicrosoft: $prefixForMicrosoft;
  $originalPrefixForOpera: $prefixForOpera;
  $originalPrefixNo: $prefixNo;

  @each $prefix in $prefixes {
    @if $prefix == webkit and $originalPrefixForWebkit == true {
      @include disable-prefix-for-all();
      $prefixForWebkit: true;
      @-webkit-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == moz and $originalPrefixForMozilla == true {
      @include disable-prefix-for-all();
      $prefixForMozilla: true;
      @-moz-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == ms and $originalPrefixForMicrosoft == true {
      @include disable-prefix-for-all();
      $prefixForMicrosoft: true;
      @-ms-keyframes #{$name} {
        @content;
      }
    }
    @if $prefix == o and $originalPrefixForOpera == true {
      @include disable-prefix-for-all();
      $prefixForOpera: true;
      @-o-keyframes #{$name} {
        @content;
      }
    }
  }

  @include disable-prefix-for-all();
  $prefixNo: true;
  @keyframes #{$name} {
    @content;
  }

  $prefixForWebkit:       $originalPrefixForWebkit;
  $prefixForMozilla:      $originalPrefixForMozilla;
  $prefixForMicrosoft:    $originalPrefixForMicrosoft;
  $prefixForOpera:        $originalPrefixForOpera;
  $prefixNo:              $originalPrefixNo;
}

// transform
//
// example:
// @include transform(rotate(-4deg));
// @include transform(rotate(-4deg) translate(6px, 18px) scale(1));
@mixin transform($property: none) {
  //  none | <transform-function>
  @include prefixer(transform, $property, webkit moz spec);
}

// transform-origi
//
// example:
// @include transform-origin(center bottom 0);
// @include transform-origin(505, 50%);
@mixin transform-origin($axes: 50%) {
  // x-axis - left | center | right  | length | %
  // y-axis - top  | center | bottom | length | %
  // z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz spec);
}

@mixin transform-style ($style: flat) {
  @include prefixer(transform-style, $style, webkit moz spec);
}

// animation
//
// example:
// @include animation(pop_move_1 6s infinite);
@mixin animation ($animations...) {
  @include prefixer(animation, $animations, webkit moz spec);
}

// animation-delay
//
// example:
// @include animation-delay(0.2s);
@mixin animation-delay ($times...) {
  @include prefixer(animation-delay, $times, webkit moz spec);
}

// transition
//
// example:
// @include transition(all 0.2s ease-in-out, opacity 1s);
@mixin transition ($properties...) {
  @if length($properties) >= 1 {
    @include prefixer(transition, $properties, webkit moz spec);
  }

  @else {
    $properties: all 0.15s ease-out;
    @include prefixer(transition, $properties, webkit moz spec);
  }
}
$font-yahei:'Microsoft YaHei';
$font-verdana:verdana;

//== @subsection 常用颜色 ==//
$color01:#e4393c;		//红色
$color02:#71b247;		//绿色
$color03:#999;			//灰色
$color04:#ff6c00;		//黄色
$color05:#005ea7;		//蓝色
$color06:#666;			//深灰色
//== @subsection clearfix 清除浮动 ==//
@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden
  }
  display: inline-block;
  * html & {height:1%}
  display:block;
  *+html &{min-height:1%}
}
$lte7:false;
@mixin inline-block {
  display: inline-block;
  *display: inline;*zoom:1;
}
// @ 圆角
@mixin r-corners ($r...){
  -webkit-border-radius: $r;
  -moz-border-radius: $r;
  border-radius: $r;
}
// @ 颜色渐变
// @ type{String:开始颜色，结束颜色}
@mixin gradual-change($s:#f8f8f8,$e:#ebebeb){
  background-color:$s;
  background-image: -moz-linear-gradient(top, $s,$e);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $s), color-stop(1, $e));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$s}', endColorstr='#{$e}', GradientType='0');
  -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$s}', endColorstr='#{$e}');
  background-image: linear-gradient(to top, $s 0%, $e 100%);
}

// @ 响应式 最小宽
// @ type{String:最小宽，类名}
@mixin mediaMin($w,$class){
  @media screen and(min-width: #{$w}){
    @content;
  }
  .#{$class}{
    @content;
  }
}

//
// @ 响应式 最大宽
// @ type{String:最大宽，类名}
//
@mixin mediaMax($w,$class){
  @media screen and(max-width: #{$w}){
    @content;
  }
  .#{$class}{
    @content;
  }
}

//
// @ 响应式 区间宽
// @ type{String:最小宽，最大宽，类名}
//
@mixin mediaMinMax($minw,$maxw,$class){
  @media screen and(min-width: #{$minw}) and(max-width: #{$maxw}){
    @content;
  }
  .#{$class}{
    @content;
  }
}

//
// @ 方块阴影 Box Shadow
// @ type{String:最小宽，最大宽，类名}
//
@mixin box-shadow($x: 0px, $y: 3px, $blur: 5px, $rgba: rgba(0, 0, 0, 0.5)) {
  -webkit-box-shadow: $x $y $blur $rgba;
  -moz-box-shadow: $x $y $blur $rgba;
  box-shadow: $x $y $blur $rgba;
}

//
// @ 半透明 alpha
// @ type{String: 百分比}
//
@mixin alpha($o:70) {
  filter: alpha(opacity=$o);
  -moz-opacity: $o/100;
  opacity: $o/100;
}

$rem: 256;
